<template>
  <div class="cmp-network-switch">
    <select v-model="networkActiveId">
      <option v-for="(v,i) in networkList" :key="i" :value="v.id">
        {{v.address}} / {{v.netmask}}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'cmp-network-switch',
  data () {
    return {
      networkList: [],
      networkActiveId: ''
    }
  },
  computed: {
    networkDict () {
      let result = {}
      this.networkList.forEach(v => {
        v && (result[v.id] = v)
      })
      return result
    }
  },
  watch: {
    networkActiveId (n) {
      this.$emit('change', this.networkDict[n])
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init () {
      // 获取本地网络连接列表
      this.$sharedObject('jstoolsNode')
      .getRouteInterfaceList({blacklist: ['Virtual', 'Loopback']})
      .then((res) => {
        this.networkList = res || []
        if (this.networkList.length) {
          this.networkActiveId = (this.networkList[0] || {}).id || ''
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
</style>
